<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>播放器</title>
		<style type="text/css">
			*{padding: 0;margin: 0;font-family: "微软雅黑"}
			header{
				width: 400px;
			    margin: 20px auto 0;
				height: 30px;
				line-height: 30px;
				background: #2b2b2b;
			}
			section,footer,dialog{ 
				width: 400px; 
				margin: 0 auto; 
			} 
			header img{ 
				padding: 0 5px; 
			    height: 100%; 
			}  
			section{ 
				height: 300px; 
			} 
			footer{ 
				width: 388px; 
				height: 30px; 
				background: #fff; 
				border: 1px solid #eaeaea;
				padding: 10px 5px 0 ; 
			}
			dialog{ 
				width: 393px; 
				height: 100px; 
				background: #CCD1D7; 
				border: 1px solid #eaeaea; 
				padding-left: 5px; background: #f9f9f9; 
				display: block; 
				color: #888888; 
				overflow-y: auto; 
				font-size: 14px 
			} 
			dialog span{ 
				font-size: 60% 
			}
			footer>div{ 
				float: left; 
				margin-right: 20px; 
				width: 20px; 
				height: 20px; 
				text-align: center; 
				line-height: 25px; 
			}
			img{ 
				height: 20px; 
			}
			#volume{ 
				float: right; 
				width: 200px; 
				text-align: right; 
			}
		</style>
		<script src="js引入/index.js"></script>
	</head>
	<body>
		<header>
			<img src="img/logo.png"/>
		</header>
		<section>
			<video width="400" src="image/Resident.MP4" id="myVideo">
			
			</video>
		</section>1
		<footer>
			<div id="playOrPaused" rel="paused">
				<img src="img/play.png" id="playOrPausedPic"/>
			</div>
			<div id="stop">
				<img src="img/stop(2).png"/>
			</div>
			<div id="fast">
				<img src="img/fast.png"/>
			</div>
			<div id="loop">
				<img src="img/loop.png"/>
			</div>
			<div id="volume">
				<img src="img/voice.png"/>
			    <input type="range" min="0" max="100" id="volumeInput" value="50"/>
			</div>
		</footer>
		<dialog id="dialog"></dialog>
	</body>
</html>
